<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .container {
                display: flex ;
                width: 600px ;
                border: 1px solid blue ;
            }
            .container>span {
                flex-basis: 200px ;
                text-align: center ;
            }
            .container>span:first-child ,
            .container>span:last-child {
                background: #dedede ;
                user-select: none;
            }
        </style>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>指令</h3>
        <p>v-on 指令用于绑定事件监听器</p>
        <p>v-on:eventType="eventHandler" 可以缩写为 @eventType="eventHandler"</p>

        <div id="app">
            <!--
            <div class="container">
                <span v-on:click="reduce">-</span>
                <span>{{counter}}</span>
                <span v-on:click="increase">+</span>
            </div>
            -->

            <div class="container">
                <span @click="reduce">-</span>
                <span>{{counter}}</span>
                <span @click="increase">+</span>
            </div>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                data(){
                    return {
                        counter: 1
                    }
                },
                methods: {
                    reduce(){
                        console.log( "减少" );
                        this.counter-- ;
                    },
                    increase(){
                        console.log( "增加" );
                        this.counter++ ;
                    }
                }
            });

            const vm = app.mount( "#app" );
            console.log( vm );
        </script>
        
    </body>
</html>